<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			#box {
				width: 600px;
				height: 500px;
				overflow: hidden;
			}

			#left {
				width: calc(30% - 5px);
				height: 100%;
				background: skyblue;
				float: left;
			}

			#resize {
				width: 5px;
				height: 100%;
				cursor: w-resize;
				float: left;
			}

			#right {
				float: right;
				width: 70%;
				height: 100%;
				background: tomato;
			}
		</style>

	</head>
	<body>
		<div id="main" style="width:100%; height:100%;position: relative">
			<div id="left" style="z-index=1; float:left; overflow: auto; width:20%; height:100%;">
				<ul class="easyui-tree"></ul>
			</div>
			<div id="right" style="z-index=0; float:right; width:80%;">
				<ul class="easyui-tree" style="margin-top: 5px; margin-left: 10px; margin-right: 10px"></ul>
			</div>
			<div id="line" onmousedown="set(event)" style="position:absolute;top:0;left:20%;height:100%;width:4px;overflow:hidden;background:#66ffff;cursor:w-resize;"></div>
		</div>
		<style type="text/javascript">
			function set(e) {
				    var oBox = $("#main")[0];
				    var oTop = $("#left")[0];
				    var oBottom = $("#right")[0];
				    var oLine = $("#line")[0];
				    var disX = (e || event).clientX;
				    oLine.left = oLine.offsetLeft;
				    document.onmousemove = function(e) {
				        console.log(oLine.left);
				        console.log((e || event).clientX);
				        console.log(disX);
				        var iT = oLine.left + ((e || event).clientX - disX);
				        debugger;
				        var maxT = oBox.clientWidth - oLine.offsetWidth;
				        oLine.style.margin = 0;
				        iT < 0 && (iT = 0);
				        iT > maxT && (iT = maxT);
				        oLine.style.left = oTop.style.width = iT + "px";
				        oBottom.style.width = oBox.clientWidth - iT + "px";
				        return false
				    };
				    document.onmouseup = function() {
				        document.onmousemove = null;
				        document.onmouseup = null;
				        oLine.releaseCapture && oLine.releaseCapture()
				    };
				    oLine.setCapture && oLine.setCapture();
				    return false
				}
		</style>
		
	</body>
</html>
